<template>
  <div class="register">
    <div class="title">
      <span class="name">
        {{ hospitalStore.hospitalInfo.hospital?.hosname }}
      </span>
      <span class="level">
        <svg
          t="1695645621004"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2566"
          width="16"
          height="16"
        >
          <path
            d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
            p-id="2567"
            fill="#7f7f7f"
          ></path>
        </svg>
        {{ hospitalStore.hospitalInfo.hospital?.param.hostypeString }}
      </span>
    </div>
    <!-- 展示内容区域 -->
    <div class="content">
      <div class="left">
        <img
          :src="`data:image/jpeg;base64,${hospitalStore.hospitalInfo.hospital?.logoData}`"
          alt=""
        />
      </div>
      <div class="right">
        <div class="r_title">挂号规则</div>
        <span>
          预约周期: {{ hospitalStore.hospitalInfo.bookingRule?.cycle }}
        </span>
        <span>
          放号时间: {{ hospitalStore.hospitalInfo.bookingRule?.releaseTime }}
        </span>
        <span>
          停挂时间: {{ hospitalStore.hospitalInfo.bookingRule?.stopTime }}
        </span>
        <span>
          具体地址: {{ hospitalStore.hospitalInfo.hospital?.param.fullAddress }}
        </span>
        <span>
          规划路线: {{ hospitalStore.hospitalInfo.hospital?.route }}
        </span>
        <span>
          退号时间: {{ hospitalStore.hospitalInfo.bookingRule?.quitTime }}
        </span>
        <div class="r_title">医院预约规则</div>
        <ul>
          <li
            v-for="(item, index) in hospitalStore.hospitalInfo.bookingRule
              ?.rule"
            :key="index"
          >
            {{ index + 1 }}.
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 医院科室 -->
    <div class="deparment">
      <div class="left">
        <ul>
          <li
            v-for="(item, index) in hospitalStore.deparmentArr"
            :key="item.depcode"
            :class="{ active: currentIndex == index }"
            @click="changeActive(index)"
          >
            {{ item.depname }}
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="list" v-for="item in hospitalStore.deparmentArr">
          <div class="list_title">
            {{ item.depname }}
          </div>
          <!-- 每个科室的门诊 -->
          <div
            class="class"
            @click="showLogin(list)"
            v-for="list in item.children"
          >
            {{ list.depname }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
// 获取路由器
let $router = useRouter();
// 获取路由对象
let $route = useRoute();
// 引入医院详情仓库的数据
import hospitalDetail from "@/store/modules/hospitalDetail";
let hospitalStore = hospitalDetail();
// import useUserStore from "@/store/modules/user";
// let userStore = useUserStore();
// 控制医院科室的响应式数据
let currentIndex = ref<number>(0);
// 切换科室的方法
const changeActive = (index: number) => {
  currentIndex.value = index;
  let allTitle = document.querySelectorAll(".list_title");
  allTitle[index].scrollIntoView({
    behavior: "smooth",
  });
};
// 点击科室的门诊login框显示隐藏
let showLogin = (list: any) => {
  // console.log(list);
  //item为选中科室得数据
  // userStore.visiable = true;
  // 点击某一个医院科室按钮，进入到相应的预约挂号详情页面
  $router.push({
    path: "/hospital/register_step1",
    query: {
      hoscode: $route.query.hoscode, //医院的编号
      depcode: list.depcode, //科室的编号
    },
  });
};
</script>

<style scoped lang="scss">
.register {
  .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    .name {
      font-size: 24px;
    }
    .level {
      color: #7f7f7f;
      margin-left: 20px;
      margin-top: 6px;
      display: flex;
      flex-direction: row;
      align-items: center;
      svg {
        margin-right: 5px;
      }
    }
  }
  .content {
    display: flex;
    margin-top: 10px;
    .left {
      width: 80px;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .right {
      flex: 1;
      font-size: 14px;
      color: #7f7f7f;
      span {
        display: block;
        margin-bottom: 10px;
        line-height: 20px;
      }
      .r_title {
        font-size: 16px;
        color: #000;
        margin: 15px 0;
      }
    }
  }

  .deparment {
    margin-top: 10px;
    width: 100%;
    height: 500px;

    display: flex;
    .left {
      width: 80px;
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        background-color: #fafafa;
        display: flex;
        flex-direction: column;
        li {
          flex: 1;
          text-align: center;
          color: #7f7f7f;
          font-size: 14px;
          line-height: 40px;
          cursor: pointer;
          &.active {
            color: #1890ff;
            border-left: 1px solid #1890ff;
            background-color: #fff;
          }
        }
      }
    }
    .right {
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      flex: 1;
      .list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .list_title {
          width: 100%;
          height: 25px;
          line-height: 25px;
          color: #616161;
          font-size: 14px;

          background-color: #fafafa;
        }
        .class {
          width: 33%;
          color: #7f7f7f;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
